<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击频率控制测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .test-section {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        button {
            background-color: #28a745;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background-color: #1e7e34;
        }
        button:disabled {
            background-color: #6c757d;
            cursor: not-allowed;
            opacity: 0.6;
        }
        button.loading {
            background-color: #ffc107;
            color: #000;
            cursor: not-allowed;
        }
        button.loading::after {
            content: " ⏳";
        }
        .log {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 10px;
            margin: 10px 0;
            max-height: 200px;
            overflow-y: auto;
            font-family: monospace;
            font-size: 12px;
        }
        .status {
            padding: 10px;
            border-radius: 4px;
            margin: 10px 0;
        }
        .status.success {
            background-color: #d4edda;
            color: #155724;
        }
        .status.error {
            background-color: #f8d7da;
            color: #721c24;
        }
        .status.warning {
            background-color: #fff3cd;
            color: #856404;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🔧 点击频率控制测试</h1>
        
        <div class="test-section">
            <h3>测试说明</h3>
            <p>这个测试页面验证了点击频率控制功能：</p>
            <ul>
                <li><strong>防抖机制</strong>: 2秒内连续点击只会执行最后一次</li>
                <li><strong>按钮状态管理</strong>: 抓取时按钮会被禁用并显示加载状态</li>
                <li><strong>全局状态控制</strong>: 防止多个抓取同时进行</li>
                <li><strong>视觉反馈</strong>: 清晰的状态提示和进度显示</li>
            </ul>
        </div>

        <div class="test-section">
            <h3>测试按钮</h3>
            <button onclick="testScrape('Model A')" class="scrape-btn">抓取 Model A</button>
            <button onclick="testScrape('Model B')" class="scrape-btn">抓取 Model B</button>
            <button onclick="testScrape('Model C')" class="scrape-btn">抓取 Model C</button>
            <button onclick="clearLog()">清空日志</button>
        </div>

        <div class="test-section">
            <h3>状态显示</h3>
            <div id="status" class="status">等待操作...</div>
        </div>

        <div class="test-section">
            <h3>操作日志</h3>
            <div id="log" class="log"></div>
        </div>
    </div>

    <script>
        // 防抖和状态管理
        let isScraping = false;
        let scrapeTimeout = null;
        const SCRAPE_DEBOUNCE_DELAY = 2000; // 2秒防抖延迟

        // 日志函数
        function log(message, type = 'info') {
            const logDiv = document.getElementById('log');
            const timestamp = new Date().toLocaleTimeString();
            const logEntry = `[${timestamp}] ${message}\n`;
            logDiv.textContent += logEntry;
            logDiv.scrollTop = logDiv.scrollHeight;
        }

        function clearLog() {
            document.getElementById('log').textContent = '';
        }

        function updateStatus(message, type = 'info') {
            const statusDiv = document.getElementById('status');
            statusDiv.textContent = message;
            statusDiv.className = `status ${type}`;
        }

        // 防抖函数
        function debounce(func, delay) {
            return function(...args) {
                clearTimeout(scrapeTimeout);
                scrapeTimeout = setTimeout(() => func.apply(this, args), delay);
            };
        }

        // 禁用所有抓取按钮
        function disableAllScrapeButtons() {
            const buttons = document.querySelectorAll('.scrape-btn');
            buttons.forEach(btn => {
                btn.disabled = true;
                btn.classList.add('loading');
            });
            log('所有抓取按钮已禁用', 'warning');
        }

        // 启用所有抓取按钮
        function enableAllScrapeButtons() {
            const buttons = document.querySelectorAll('.scrape-btn');
            buttons.forEach(btn => {
                btn.disabled = false;
                btn.classList.remove('loading');
            });
            log('所有抓取按钮已启用', 'success');
        }

        // 模拟抓取函数
        const debouncedScrape = debounce(async function(model) {
            if (isScraping) {
                log(`抓取正在进行中，忽略 ${model} 的请求`, 'warning');
                return;
            }

            isScraping = true;
            disableAllScrapeButtons();
            updateStatus(`正在抓取 ${model}...`, 'warning');
            log(`开始抓取 ${model}`, 'info');

            // 模拟API调用延迟
            await new Promise(resolve => setTimeout(resolve, 3000 + Math.random() * 2000));

            // 模拟成功或失败
            const success = Math.random() > 0.2; // 80%成功率

            if (success) {
                const count = Math.floor(Math.random() * 5) + 1;
                updateStatus(`✅ 成功抓取 ${model} (${count} 个配置)`, 'success');
                log(`抓取 ${model} 成功，获得 ${count} 个配置`, 'success');
            } else {
                updateStatus(`❌ 抓取 ${model} 失败`, 'error');
                log(`抓取 ${model} 失败`, 'error');
            }

            isScraping = false;
            enableAllScrapeButtons();
        }, SCRAPE_DEBOUNCE_DELAY);

        // 用户点击的抓取函数（带防抖）
        async function testScrape(model) {
            if (isScraping) {
                alert('⚠️ 抓取正在进行中，请稍候...');
                log(`用户尝试抓取 ${model}，但抓取正在进行中`, 'warning');
                return;
            }

            log(`用户点击抓取 ${model}，启动防抖机制`, 'info');
            updateStatus(`⏳ 准备抓取 ${model} (${SCRAPE_DEBOUNCE_DELAY/1000}秒后开始)`, 'warning');

            // 调用防抖函数
            debouncedScrape(model);
        }

        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            log('测试页面已加载，点击频率控制功能已启用', 'success');
            updateStatus('测试页面已准备就绪', 'success');
        });
    </script>
</body>
</html>
